<template>
    <a :href="detailUrl">
        <div class="book-card">
            <div class="thumb" @click.stop="preview">
                <img :src="book.image" class="img" mode="aspectFit">
            </div>
            <div class="detail">
                <div class="row text-primary">
                    <div class="left">{{ book.title }}</div>
                    <div class="right">
                        {{ book.rate }}<Rate :value='book.rate'></Rate>
                    </div>
                </div>
                <div class="row">     
                    <div class="left">{{ book.author }}</div>
                    <div class="right text-primary">浏览量:{{ book.count }}</div>
                </div>
                <div class="row">
                    <div class="left">{{ book.publisher }}</div>
                    <div class="right">{{ book.user_info.nickName }}</div>
                </div>
            </div>
        </div>
    </a>
</template>

<script type="text/ecmascript-6">
import Rate from '@/components/Rate'

export default {
  data () {
    return {}
  },
  props: ['book'],
  components: {
    Rate
  },
  computed: {
    detailUrl () {
      return '/pages/detail/main?id=' + this.book.id
    }
  },
  methods: {
    preview () {
      wx.previewImage({
        current: this.book.image, // 当前显示图片的http链接
        urls: [this.book.image] // 需要预览的图片http链接列表
      })
    }
  }
}
</script>

<style scoped lang="scss">
.book-card {
  padding: 10rpx;
  overflow: hidden;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  font-size: 28rpx;
  .thumb {
    width: 180rpx;
    height: 180rpx;
    float: left;
    margin: 0 auto;
    overflow: hidden;
    .img {
      max-width: 100%;
      max-height: 100%;
    }
  }
  .detail {
    margin-left: 200rpx;
    .row {
      line-height: 40rpx;
      margin-bottom: 6rpx;
      // display: flex;
      // flex-direction: row;
      // justify-content: space-around;
      .right {
        float: right;
      }
      .left {
        display: inline-block;
      }
    }
  }
}
</style>
